<template>
  <view class="app-container">
    <view class="topfloat"></view>
    <view
      class="top-content"
      style
    >
      <u-tabs-swiper
        style="position: fixed;"
        bg-color="linear-gradient(to left, #1040BE, #026DFF)"
        active-color="#ffffff"
        inactive-color="#ffffff"
        color="#ffffff"
        ref="uTabs"
        :list="list"
        :current="current"
        @change="tabsChange"
        :is-scroll="false"
        swiperWidth="750"
      ></u-tabs-swiper>
    </view>
    <view class="top">
      <u-input
        v-if="rolekey!=='Installer'"
        v-model="queryParams.projectCode"
        :border="true"
        @input="inputChange"
        placeholder="请输入合同号"
        :clearable="true"
      />
      <u-input
        v-model="queryParams.deviceCode"
        :border="true"
        @input="inputChange"
        placeholder="请输入产品代码"
        :clearable="true"
      />
      <u-button
        type="primary"
        size="mini"
        class="btn"
        style="margin-left:5rpx;margin-top:5rpx"
        @click="cancel"
      >重置</u-button>
    </view>
    <view class="box-contet">
      <swiper
        class="cardlist"
        :current="current"
        @change="change"
      >
        <swiper-item
          class="swiper-item"
          v-for="(item,index) in 2"
          :key="index"
        >
          <scroll-view
            scroll-y
            @scrolltolower="handle"
            :lower-threshold="250"
            class="scrollHeight"
          >
            <scroll-view
              :scroll-y="true"
              class="swiper-item"
              @scrolltolower="onreachBottom"
            >
              <view
                class
                style="height: 10rpx; color: #eee"
              ></view>
              <view class="card-item">
                <VideoCard
                  v-for="(item1,index1) of videoList"
                  :key="index1"
                  :data="item1"
                  @cache="getList"
                >
                  视频:{{item1.name}}
                </VideoCard>

                <u-loadmore
                  class="loadmore"
                  :status="status"
                  :loadText="loadText"
                />
              </view>

            </scroll-view>
          </scroll-view>
        </swiper-item>
      </swiper>

    </view>
    <!-- <view
      @click="handleAllDelete"
      class="deleteAll"
    >
      删除全部视频缓存
    </view> -->
        <view class="bottom">
      <u-popup
        v-model="hidden"
        :mask-close-able="false"
        mode="center"
        border-radius="14"
        width="600rpx"
        height="200px"
      >
        <view class="title">扫描产品</view>
        <view class="input">
          <u-form-item
            label-width="130"
            label="产品代码"
          >
            <u-input
              v-model="sn"
              :focus="true"
              :placeholder="search"
            />
          </u-form-item>
        </view>
        <view class="foot">
          <view class="btn">
            <u-button
              @click="back"
              :ripple="true"
              ripple-bg-color="#32afff"
            >返回</u-button>
          </view>
          <view
            class="btn"
            style="margin-left:30rpx"
          >
            <u-button
              @click="handleGo"
              type="primary"
              :ripple="true"
              ripple-bg-color="#32afff"
            >确认</u-button>
          </view>

        </view>
      </u-popup>
    </view>
     <view
                class="fix"
                @click="handleShowSec"
              >
                <image src="../../static/images/saomiao.png" />
                <!-- <u-icon name="scan" color="white" size="66"></u-icon> -->
              </view>
  </view>
</template>

<script>
import { installGuideList, dataQuery } from "@/api/index";
import WucTab from "@/components/wuc-tab/wuc-tab.vue";
import CacheCard from "./components/cacheCard";
import VideoCard from "./components/videoCard";
export default {
  components: { WucTab, CacheCard, VideoCard },
  props: {},
  data() {
    return {
      rolekey: true,
      hidden: false,
      search: "请扫描产品代码",
      sn: "",
      value: "",
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        // projectName: undefined,
        projectCode: undefined,
        // productName: undefined,
        deviceCode: undefined,
        // general: undefined,
        type: "0"
      },
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      list: [
        {
          name: "具体项目文件"
        },
        {
          name: "通用文件"
        }
      ],
      status: "nomore",
      loadText: {
        loadmore: "暂无数据",
        loading: "努力加载中",
        nomore: "没有更多数据"
      },
      timer: null,
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      videoList: [
      ],
      cacheList: [],
      url: ""
    };
  },
  onShow() {
    this.getList();
    let that = this;
    that.cacheList = uni.getStorageSync("cacheList");
    let roleKey = uni.getStorageSync("roleKey");
    this.rolekey = roleKey
    if (roleKey == "Inspector") {
      this.timer = setInterval(function() {
        const code = "alarm_summary";
        let number = 0;
        dataQuery({}, code).then(res => {
          res.forEach(item => {
            if (item.label === "notRecovered") {
              if (item.value) {
                uni.showTabBarRedDot({
                  index: 1
                });
              } else {
                uni.removeTabBarBadge({
                  index: 1
                });
              }
            } else {

              uni.removeTabBarBadge({
                index: 1
              });
            }
          });
        });
      }, 5000);
    } else {
      // this.rolekey=false
    }
  },
  onLoad: function(val) {
    let roleKey = uni.getStorageSync("roleKey");
    if (roleKey == "Installer") {
      console.log(1111)
      uni.setTabBarItem({
        index: 0,
        visible: false
      });
      uni.setTabBarItem({
        index: 1,
        visible: false
      });
    } else {
      uni.setTabBarItem({
        index: 0,
        visible: true
      });
      uni.setTabBarItem({
        index: 1,
        visible: true
      });
    }
    uni.startPullDownRefresh();
  },
  onHide() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    handle() {},
    cancel() {
      this.queryParams.projectCode = undefined;
      this.queryParams.deviceCode = undefined;
      this.getList();
    },
    getList() {
      uni.showLoading({
        title: "加载中"
      });
      // this.status = "loading";
      this.cacheList = uni.getStorageSync("cacheList");
      const data = this.queryParams;
      if (this.current === 1) {
        data.general = true;
      } else {
        data.general = false;
      }
      installGuideList(data).then(res => {
        if (res.rows.length > 0) {
          res.rows.forEach((item1, index1) => {
            if (this.cacheList.length > 0) {
              this.cacheList.forEach((item2, index2) => {
                if (item1.videoPath === item2.videoPath) {
                  item1.cachePath = item2.cachePath;
                }
              });
            }
          });
        } else {
          this.status = "loadmore";
        }
        uni.hideLoading();
        this.total = res.total;
        this.videoList = res.rows;
      });
    },
    inputChange() {
      this.getList();
    },
    handleUpdate() {
      let that = this;
      that.cacheList = uni.getStorageSync("cacheList");
    },
    tabsChange(index) {
      this.current = index;
      this.getList();
    },
    change(index) {
      this.current = index.detail.current;
      this.getList();
    },
    // 扫描按钮
    handleShowSec() {
      this.search = "请扫描产品代码";
      this.hidden = true;
    },
    back() {
      this.sn = "";
      this.hidden = false;
    },
    handleGo() {
      if (this.sn) {
        this.queryParams.deviceCode = this.sn;
        this.sn = "";
        this.hidden = false;
        this.getList();
      } else {
        this.search = "产品代码不能为空";
      }
      // uni.navigateTo({
      // 	url: '/pages/detail/detail'
      // })
    },
    // scroll-view到底部加载更多
    onreachBottom() {
      // console.log("到底了");
      // this.status = "loading";
      if (this.queryParams.pageSize < this.total) {
        this.queryParams.pageSize += 5;
        this.status = "loading";
        this.getList();
      } else {
        this.status = "nomore";
      }
    },
    handleAllDelete() {
      let that = this;
      uni.showModal({
        title: "提示",
        content: `确定清除所有缓存视频?`,
        success: function(rsp) {
          if (rsp.confirm) {
            uni.getSavedFileList({
              success: function(res) {
                uni.showLoading({
                  title: "清除中",
                  mask: true
                });
                let flag = 0;
                res.fileList.forEach(item => {
                  flag += 1;
                  uni.removeSavedFile({
                    filePath: item.cachePath,
                    complete: function(res) {}
                  });
                  if (flag == res.fileList.length) {
                    uni.setStorageSync("cacheList", []);
                    uni.hideLoading();
                    uni.showToast({
                      icon: "none",
                      title: "清除成功"
                    });
                  }
                });
              }
            });
          } else if (rsp.cancel) {
            // console.log("用户点击取消");
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.bottom {
  .title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-top: 10px;
  }
  .input {
    width: 100%;
    padding: 20rpx 50rpx 10rpx;
  }
  .foot {
    display: flex;
    // margin-left:-34rpx;
    .btn {
      flex: 1;
      margin: 60rpx 50rpx 0rpx;
    }
  }
}
.app-container {
  height: 100%;
  overflow: hidden;
  background-color: white;
  .top-content {
    height: 160upx;
    background: linear-gradient(to left, #1040be, #026dff);
  }
  .app-head {
    position: absolute;
    padding: 30rpx;
    width: 100%;
    top: 100rpx;
    background-color: white;
    display: flex;
    border-radius: 40rpx 40rpx 0 0;
    margin-top: 45px;
  }

  .box-contet {
    height: calc(100% - 180upx);
    margin-top: 20rpx;
    .cardlist {
      height: 100%;
      .scrollHeight {
        height: 100%;
        .swiper-item {
          height: 100%;
          .card-item {
            width: 100%;
            padding: 30rpx;
          }
        }
      }
    }
  }
}
.fix {
  position: fixed;
  bottom: 100rpx;
  right: 40rpx;
  z-index: 9999;
  image {
    height: 120rpx;
    width: 120rpx;
  }
}
.top {
  z-index: 10;
  position: absolute;
  padding: 31rpx 31rpx 16rpx 31rpx;
  width: 100%;
  top: 100rpx;
  background-color: white;
  display: flex;
  border-radius: 40rpx 40rpx 0 0;
  .btn {
    position: absolute;
    right: 35rpx;
    border-radius: 16rpx;
  }
  /deep/ .u-btn--primary {
    background: linear-gradient(to left, #1040be, #026dff);
  }
  /deep/ .uni-input-placeholder {
    font-size: 22rpx;
    color: #989898 !important;
    // line-height:100upx;
  }
  /deep/ .u-mode-plain-primary {
    border: 1px solid #eee;
    box-shadow: 0 0 20rpx #eee;
    border-radius: 16rpx;
    color: #989898;
  }
  /deep/ .u-flex {
    // margin-right: 20rpx;
  }
  .image {
    position: absolute;
    width: 28rpx;
    height: 34rpx;
    left: 45rpx;
    // height: 80upx;
  }
  /deep/ .u-size-default {
    padding: 18rpx 24rpx 18rpx 50rpx;
  }
  /deep/ .u-input--border {
    border: 1px solid #eee !important;
    box-shadow: 0 0 20rpx #eee;
    border-radius: 16rpx;
    // color: #989898 !important;
    // height: 60upx;
    // line-height: 20upx;
  }
  /deep/ .u-input__input {
    min-height: 55upx !important;
    color: #989898 !important;
  }
}
/deep/ .u-input--border {
  border: 1px solid #eee !important;
  border-radius: 16rpx;
  // color: #989898 !important;
  // height: 60upx;
  // line-height: 20upx;
}
/deep/ .uni-input-placeholder {
  font-size: 22rpx;
  color: #989898 !important;
  // line-height:100upx;
}
.deleteAll {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
}
/deep/ .u-input--border {
  padding: 1px 9px !important;
}
</style>